<template>
    <div>
        <mian-layout>
            <template v-slot:conTop>
                <el-form size="mini" :inline="true" :model='search' ref="search_data" class="demo-form-inline search-form">
                    <el-form-item label="订单编号" prop="orderNo">
                        <el-input v-model="search.orderNo" placeholder="输入订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称" prop="goodsName">
                        <el-input v-model="search.goodsName" placeholder="输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="创建时间" prop="dataTime">
                        <el-date-picker v-model="dataTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss" />
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" plain  icon="el-icon-search" @click="doSearch">搜索</el-button>
                        <el-button icon="el-icon-refresh-right" @click="resetForm('search_data')">重置</el-button>
                    </el-form-item>
                </el-form>   
            </template>
            <my-table :loading="loading" :lists="tableData" @selectionChange="tableSelect" @pageChange="handleChange" :sequence="true" :page='page' showCheck selectKey="userId">
                
                <el-table-column property="orderNo" label="订单编号" align='center'></el-table-column>
                <el-table-column property="goodsName" label="商品名称" align='center'></el-table-column>
                <el-table-column property="type" label="订单类型" align='center'></el-table-column>
                <el-table-column property="settleAmount" label="成本价" align='center'>
                    <template slot-scope="scope">
                        <span>{{scope.row.settleAmount.decimalTwoString}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="phone" label="会员价/拍卖成交价" align='center'>
                    <template slot-scope="scope">
                        <span>{{scope.row.totalAmount.decimalTwoString}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="phone" label="实际付款金额" align='center'>
                    <template slot-scope="scope">
                        <span>{{scope.row.payAmount.decimalTwoString}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="phone" label="公司收入金额" align='center'>
                    <template slot-scope="scope">
                        <span>{{scope.row.incomeAmount.decimalTwoString}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="phone" label="支付手续费" align='center'>
                    <template slot-scope="scope">
                        <span>{{scope.row.payChargeAmount.decimalTwoString}}</span>
                    </template>
                </el-table-column>
                <el-table-column property="" label="交易状态" align='center'>
                    <template slot-scope="scope">
                        <span v-if="scope.row.orderStatus==10">待付款</span>
                        <span v-else-if="scope.row.orderStatus==20">待发货</span>
                        <span v-else-if="scope.row.orderStatus==30">已发货</span>
                        <span v-else-if="scope.row.orderStatus==50">交易成功</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column property="createTime" label="交易时间" align='center'>
                    <template slot-scope="scope">
                        <span>{{scope.row.successTime}}</span>
                    </template>
                </el-table-column>
            </my-table>
        </mian-layout>
    </div>
</template>
<script>
import {mapGetters} from "vuex"
import myTable from '@/components/public/myTable';
import myDialog from '@/components/public/myDialog';
import moment from 'moment'
moment.locale('zh-cn')
import {
  settle_detail_list
} from '@/api/arApi'
export default {
    components:{
      myTable,
      myDialog
    },
    data(){
        return{
            search:{
                orderNo:'',
                goodsName:'',
                beginDate: "",
                endDate: "",
                orderField: "",
                orderType: ""
            },
            page:{
                pageSize:10,
                pageIndex:1,
			    total:0,
            },
            loading:true,
            tableData:[],
            multipleSelectionIds:[],
            dataTime:''
        }
    },
    computed:{
        ...mapGetters({
            'userInfo':'user/userInfo'
        })
    },
    created(){
        const date = this.$route.query.date
        if(date){
            const beginDate = moment(date).startOf('month').format('YYYY-MM-DD ') + '00:00:00';
            const endDate = moment(date).endOf('month').format('YYYY-MM-DD ') + '23:59:59'
            this.dataTime = [beginDate,endDate]
        }
        this.getList()
    },
    methods:{
        doSearch(){
            this.pageIndex = 1
            this.getList()
        },
        getList(){ 
            this.loading = true
            if(this.dataTime){
                this.search.beginDate = this.dataTime[0]
                this.search.endDate = this.dataTime[1]
            }
            settle_detail_list({
                limit: this.page.pageSize,
                page: this.page.pageIndex,
                ...this.search
            }).then(res=>{
                this.loading = false
                this.tableData = res.data
                this.page.total = res.count
            })
        },
        
        tableSelect(data){
            //this.ruleForm.userIds = data.userId
            this.multipleSelectionIds = data.userId
        },
        handleChange(index) {
            this.page.pageIndex = index;
            this.getList();
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dataTime = []
            for (const key in this.search) {
               this.search[key] = '' 
            }
            this.page.pageIndex = 1
            this.getList()
        },
    }
}
</script>